<template>
	<div class="flex-col justify-start page">
		<div class="flex-col section">
			<div class="flex-col self-stretch">
				<div class="flex-row justify-between items-center group">

					<img class="image" @click="goBack()"
						src="http://haojiezhe12345.top:8090/miniprogram_static/community/8691bb9c28a605ffce91e37eac1d7c16.png" />
					<div class="flex-row items-center">
						<img class="shrink-0 image_2"
							src="http://haojiezhe12345.top:8090/miniprogram_static/community/e3a96e09f286f9bf5929d06bf4513e2a.png" />
						<span class="text ml-9">{{ post.id != null ? '编辑动态' : '写动态' }}</span>
					</div>

					<div class="flex-row items-center" @click="sendPost()">
						<img class="shrink-0 image_3"
							src="http://haojiezhe12345.top:8090/miniprogram_static/community/7dd19b8cde0c4d326e83d07ad8653510.png" />
						<span class="ml-4 font text_2">发布</span>
					</div>

				</div>

				<div class="flex-row justify-center items-center relative group_2">
					<div class="flex-row justify-start items-center image-wrapper pos">
						<img class="image_4"
							src="http://haojiezhe12345.top:8090/miniprogram_static/community/76f51cf0ebe77ac3f2bfdaf882389a82.png" />
					</div>
					<div class="flex-row justify-start items-center image-wrapper">
						<img class="image_6"
							src="http://haojiezhe12345.top:8090/miniprogram_static/community/476862bfa6436a12070452a118f41d8c.png" />
					</div>
					<div class="flex-row justify-start items-center image-wrapper pos_2">
						<img class="image_5"
							src="http://haojiezhe12345.top:8090/miniprogram_static/community/c7eb72378e1651260ff1e8eb300de11b.png" />
					</div>
				</div>
			</div>

			<div class="flex-row self-stretch group_3">

				<div class="flex-row items-center">
					<img class="shrink-0 image_7"
						src="http://haojiezhe12345.top:8090/miniprogram_static/community/605b85e56b0b5c659daa8e44a62cd812.png" />
					<span class="text_3 ml-7">心情</span>
				</div>

				<div class="ml-28 flex-row items-center section_2"
					@click="post.mood == 1 ? post.mood = 0 : post.mood = 1"
					:style="{ flexFlow: post.mood == 1 ? 'row-reverse' : 'row', gap: '0.3rem' }">

					<img class="shrink-0 image_8"
						src="http://haojiezhe12345.top:8090/miniprogram_static/community/8c24a8b2bd58266ce4735dd36ca94174.png" />
					<span class="text_4">{{ post.mood == 1 ? '开心' : '沮丧' }}</span>
				</div>

			</div>

			<div class="flex-col justify-start items-center self-start text-wrapper">
				<textarea style="width: 100%;" v-model="post.text" placeholder="一本有趣的书，一段有趣的经历，又或者..." />
			</div>

			<div class="img-container">
				<view v-if="post.image != ''" v-for="img in post.image.split(',')" :key="img">
					<image mode="aspectFill" :src="img" />
					<uni-icons type="closeempty" size="1.5rem" color="white" @click="removeImg(img)"></uni-icons>
				</view>

				<div @click="upload()">
					<image mode="aspectFill"
						src="http://haojiezhe12345.top:8090/miniprogram_static/community/ee124d20dafb8a837720813e23e744f6.png" />
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		uploadImg,
		addPost,
		updatePost,
	} from "@/config/api.js"

	import {
		gotoUrl,
		goBack,
	} from "@/utils.js"

	export default {
		components: {},
		props: {},
		data() {
			return {
				post: {
					"image": "",
					"mood": 1,
					"text": "",
					"title": ""
				},

				goBack,
			};
		},
		onLoad(e) {
			try {
				this.post = JSON.parse(e.edit)
			} catch (e) {}
		},
		methods: {
			async upload() {
				var img = await uploadImg()
				this.post.image += (this.post.image == '' ? '' : ',') + img
				console.log(this.post.image)
			},

			removeImg(img){
				this.post.image = this.post.image.replace(img + ',', '').replace(',' + img, '').replace(img, '')
			},

			async sendPost() {
				if (this.post.id) {
					await updatePost(this.post)
				} else {
					await addPost(this.post)
				}
				uni.$emit('reloadPersonal')
				uni.$emit('reloadCommunity')
				goBack()
			}
		},
	};
</script>

<style scoped lang="css">
	@import url("main.css");

	.img-container {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.5rem;
		padding: 0 1rem;
	}

	.img-container>view {
		width: 7rem;
		max-width: calc((100vw - 3rem) / 3);
		height: 7rem;
		max-height: calc((100vw - 3rem) / 3);
		box-sizing: border-box;
		position: relative;
	}

	.img-container>view>image {
		width: 100%;
		height: 100%;
	}

	.img-container>view>uni-icons {
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 0.2rem;
	}

	.img-container>view:last-child>image {
		background-color: #fff;
		box-sizing: border-box;
		padding: 25%;
	}

	.ml-9 {
		margin-left: 0.56rem;
	}

	.ml-7 {
		margin-left: 0.44rem;
	}

	.ml-45 {
		margin-left: 2.81rem;
	}

	.page {
		background-image: url('http://haojiezhe12345.top:8090/miniprogram_static/community/e4bc3a81a44e4a5f2074f4a959911551.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 1.13rem 0 0 0;
	}

	.group {
		padding: 0 0.63rem 0.88rem;
		border-bottom: solid 0.063rem #000000;
	}

	.image {
		width: 1.7rem;
		height: 1.7rem;
	}

	.image_2 {
		width: 2rem;
		height: 1.75rem;
	}

	.text {
		color: #41434f;
		font-size: 1.5rem;
		font-family: AlimamaShuHeiTi;
		line-height: 1.38rem;
	}

	.image_3 {
		width: 2.13rem;
		height: 1.63rem;
	}

	.font {
		font-size: 1.5rem;
		font-family: HarmonyOSSansSC;
		font-weight: 900;
	}

	.text_2 {
		color: #41434f;
		line-height: 1.43rem;
	}

	.group_2 {
		padding: 1.06rem 1rem 0.38rem;
	}

	.image-wrapper {
		width: 4.5rem;
	}

	.pos {
		position: absolute;
		left: 1rem;
		bottom: 0;
	}

	.image_4 {
		width: 4.31rem;
		height: 2.88rem;
	}

	.image_6 {
		width: 4.5rem;
		height: 2rem;
	}

	.pos_2 {
		position: absolute;
		right: 1.5rem;
		bottom: 0.13rem;
	}

	.image_5 {
		width: 4rem;
		height: 2.56rem;
	}

	.group_3 {
		margin-top: 1.31rem;
		padding: 0 1.2rem;
	}

	.image_7 {
		width: 2.25rem;
		height: 2.25rem;
	}

	.text_3 {
		color: #000000;
		font-size: 1.25rem;
		font-family: AlimamaShuHeiTi;
		line-height: 1.16rem;
	}

	.section_2 {
		box-shadow: 0rem 0.13rem 0rem #18191f;
		background-color: #e9e7fc;
		border-radius: 3.25rem;
		width: 7.88rem;
		height: 2.25rem;
		border-left: solid 0.13rem #41434f;
		border-right: solid 0.13rem #41434f;
		border-top: solid 0.13rem #41434f;
		border-bottom: solid 0.13rem #41434f;
	}

	.image_8 {
		width: 4.75rem;
		height: 2.25rem;
	}

	.text_4 {
		color: #000000;
		font-size: 1.13rem;
		font-family: SourceHanSansCN;
		line-height: 1rem;
	}

	.group_4 {
		margin-top: 0.5rem;
		padding: 0 1rem;
	}

	.image_9 {
		flex: 1 1 9.63rem;
		border-radius: 0.5rem;
		height: 10.38rem;
	}

	.image-wrapper_2 {
		padding: 2.75rem 0;
		flex: 1 1 9.63rem;
		background-color: #ffffff;
		border-radius: 0.5rem;
		height: 10.38rem;
		border-left: solid 0.063rem #000000;
		border-right: solid 0.063rem #000000;
		border-top: solid 0.063rem #000000;
		border-bottom: solid 0.063rem #000000;
	}

	.image_10 {
		width: 3.56rem;
		height: 4.63rem;
	}

	.text-wrapper {
		margin: 1rem;
		padding: 1.3rem;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 1.3rem;
		width: calc(100% - 2rem);
	}

	.text_5 {
		color: #ffffff;
		line-height: 2.5rem;
	}
</style>